/**
 * @fileoverview Monitor for the Sphero mode.
 *
 * @license Copyright 2015 The Coding with Chrome Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author mbordihn@google.com (Markus Bordihn)
 */

{namespace cwc.soy.mode.sphero.Monitor autoescape="strict"}


/**
 * Intro template.
 */
{template .intro}
  {@param prefix: string}
  <div id="{$prefix}intro">
    The following screens allow you to control, monitor and calibrate the Sphero ball.<br>
    <br>
    Please calibrate your Sphero in the calibration screen before you execute any program.<br>
  </div>
{/template}


/**
 * Calibration template.
 */
{template .calibration}
  {@param prefix: string}
  <div>
    Sphero Calibration Screen<hr>
  </div>
  <p>
    <input type="range" id="{$prefix}calibration-slide" min="0" max="360" value="180" class="mdl-slider mdl-js-slider">
  </p>
  <p>
    Move the slider to the left / right until the tailing light shows in your direction.<br>
  </p>
{/template}


/**
 * Control template.
 */
{template .control}
  {@param prefix: string}
  <div id="{$prefix}control">
    Use the buttons belows or the keyboard to control the Sphero manual.<br>
    <div id="{$prefix}control-buttons">
      <div id="{$prefix}move-left" class="icon_36px icon_button">keyboard_arrow_left</div>
      <div id="{$prefix}move-forward" class="icon_36px icon_button">keyboard_arrow_up</div>
      <div id="{$prefix}move-backward" class="icon_36px icon_button">keyboard_arrow_down</div>
      <div id="{$prefix}move-right" class="icon_36px icon_button">keyboard_arrow_right</div>
    </div>
    <div id="{$prefix}control-commands">
      <div id="{$prefix}sleep" class="icon_36px icon_button">local_hotel</div>
      <div class="mdl-tooltip" for="{$prefix}sleep">
        Puts the connected unit to sleep.
      </div>
      <div id="{$prefix}stop" class="icon_36px icon_button">pan_tool</div>
      <div class="mdl-tooltip" for="{$prefix}stop">
        Stops the executing of the code and the connected unit. (Space-key)
      </div>
    </div>
  </div>
{/template}


/**
 * Monitor template.
 */
{template .monitor}
  {@param prefix: string}
  <div id="{$prefix}location">
    <div class="mdl-spinner mdl-js-spinner is-active"></div>Waiting for data ...
  </div>
  <div id="{$prefix}velocity"></div>
  <div id="{$prefix}speed"></div>
{/template}


/**
 * Location data template.
 */
{template .locationData}
  {@param prefix: string}
  {@param data: ?}
  <h3>Location</h3>
  <div id="{$prefix}location-data-values">
    X: {$data.x}<br>
    Y: {$data.y}<br>
  </div>
{/template}


/**
 * Velocity data template.
 */
{template .velocityData}
  {@param prefix: string}
  {@param data: ?}
  <h3>Velocity</h3>
  <div id="{$prefix}velocity-data-values">
    X: {$data.x}<br>
    Y: {$data.y}<br>
  </div>
{/template}


/**
 * Velocity data template.
 */
{template .speedData}
  {@param prefix: string}
  {@param data: ?}
  <h3>Speed</h3>
  <div id="{$prefix}speed-data-values">
    {$data}
  </div>
{/template}
